<template>
  <div class="container">

    <!-- 顶部按钮区域 -->
    <div class="header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="80px">
    
        <el-form-item label="部门">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option v-for="item in hdquyu" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索">
          <el-input v-model="formInline.user" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item label="办理周期">
          <el-date-picker v-model="ruleForm.data" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="search_button" type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
          <el-button class="chongzhi_button" type="default" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table :data="data" style="width: 100%" stripe>
      <el-table-column prop="serialNumber" label="序号" width="80"></el-table-column>
      <el-table-column prop="registrationDate" label="登记时间" width="120"></el-table-column>
      <el-table-column prop="briefDescription" label="简要事由" width="300"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 4px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="100">
        <template slot-scope="scope">
          <i class="el-icon-time">{{ scope.row.sex }}</i>
        </template>
      </el-table-column>
    
      <el-table-column prop="contactPhone" label="联系电话" width="250">
      </el-table-column>
      <el-table-column prop="contactPhone" label="身份证号" width="250">
      </el-table-column>
      <el-table-column prop="contactPhone" label="家庭地址或单位" width="250">
      </el-table-column>
      <el-table-column prop="address" label="纠纷类型" width="120">
        <template slot-scope="scope">
          <el-tag type="info">{{ scope.row.handleStatus }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="分流转办部门" width="120">
        <template slot-scope="scope">
          <el-tag class="flzbbumen">{{ scope.row.handleStatus }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="附件" width="120" align="center">
        <template slot-scope="scope">
          <div> <el-tag >{{ scope.row.handleStatus }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="是否回访" width="120" align="center">
        <template slot-scope="scope">
          <div> <el-tag >{{ scope.row.handleStatus }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="完结时间" width="120" align="center">
        <template slot-scope="scope">
          <div>
            <div>办结时间剩余</div>
            {{ scope.row.registrationDate }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" class="process-btn" @click="handleItem(scope.row)" @mouseover="hover = true"
            @mouseleave="hover = false" :style="hover ? hoverStyle : {}">
            还原
          </el-button>
        
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination background @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize"
        :total="totalItems" layout="total, prev, pager, next" class="pagination"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first", /* 头部tabs切换 */
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      formInline: {
        user: "",
        region: "",
      },
      ruleForm: [],
      searchQuery1: "",
      searchQuery2: "",
      hover: false,
      currentPage: 1,
      pageSize: 7,
      totalItems: 2888,
      data: [
        {
          serialNumber: "01",
          registrationDate: "2024-11-21",
          briefDescription: "某工人小摔伤",
          name: "张三",
          gender: "男",
          contactPhone: "13987654321",
          idCard: "4008001999001027789",
          address: "高唐县姜店镇中心街 58号",
          department: "物业部门",
          handleStatus: "处理中",
        },
        // 示例数据...
      ],
      hoverStyle: {
        backgroundColor: "#e4f7ff",
        color: "#409eff",
      },
    };
  },
  methods: {
    /* 头部tabs切换 */
    handleClick() {
    },
    /* 搜索按钮 */
    onSearch() {

    },
    /* 重置按钮 */
    onReset() {
      this.searchQuery1 = "";
      this.searchQuery2 = "";
    },
    // 处理
    handleItem(row) {
      console.log("Handling item:", row);
    },
    // 删除
    deleteItem(row) {
      console.log("Deleting item:", row);
    },
    // 分页更改
    handlePageChange(page) {
      this.currentPage = page;
      console.log("Page changed to:", page);
    },
  },
};
</script>

<style scoped>
.container {
  margin: 20px 30px;
  font-family: "Arial", sans-serif;
}

.header {
  margin-bottom: 20px;
  background-color: #f4f7fa;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.button {
  font-size: 14px;
  padding: 8px 16px;
}

.search-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.search-input {
  width: 200px;
  margin-right: 20px;
  border-radius: 4px;
}

.search-btn,
.reset-btn {
  padding: 8px 16px;
  font-size: 14px;
}

.search-btn {
  background-color: #409eff;
  color: white;
  margin-right: 10px;
}

.reset-btn {
  background-color: #f0f2f5;
  color: #333;
}

.process-btn {
  background-color: #409eff;
  color: white;
  margin-right: 5px;
  border-radius: 4px;
}

.delete-btn {
  background-color: #f56c6c;
  color: white;
  border-radius: 4px;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table td {
  font-size: 14px;
  line-height: 40px;
}

.el-table-row:hover {
  background-color: #f0f9ff;
}

.pagination {
  font-size: 14px;
}

.el-pagination__prev,
.el-pagination__next {
  background-color: #409eff;
  color: white;
}

.el-pagination__pager {
  color: #409eff;
}
</style>
